<template>
  <el-row :gutter="10" class="quick-entry">
    <el-col :xs="12" :sm="12" :lg="8" class="entry-item-col">
      <div class="entry-item">
        <div class="header">
          <div class="title">销售订单数（单）</div>
        </div>
        <div class="content">
          <div class="top">
            <div class="left">
              <div class="value">19</div>
              <div class="label">
                <div>本月</div>
                <div class="inner-right">
                  <div>月同比：</div>
                  <div class="num">
                    <span>100%</span>
                    <i class="el-icon-caret-top"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="value">5</div>
              <div class="label">上月</div>
            </div>
          </div>
          <div class="compare">
            <div class="label">总销售数</div>
            <div class="value">1134 单</div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="8" class="entry-item-col">
      <div class="entry-item">
        <div class="header order-header">
          <div class="title">完成工单数（单）</div>
        </div>
        <div class="content">
          <div class="top">
            <div class="left">
              <div class="value">0</div>
              <div class="label">
                <div>本月</div>
                <div class="inner-right">
                  <div>月同比：</div>
                  <div class="num">
                    <span>0%</span>
                    <i class="el-icon-caret-top"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="value">0</div>
              <div class="label">上月</div>
            </div>
          </div>
          <div class="compare">
            <div class="label">总完成工单数</div>
            <div class="value">1298 单</div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="8" class="entry-item-col">
      <div class="entry-item">
        <div class="header count-header">
          <div class="title">销售金额数（元）</div>
        </div>
        <div class="content">
          <div class="top">
            <div class="left">
              <div class="value">1272W</div>
              <div class="label">
                <div>本月</div>
                <div class="inner-right">
                  <div>月同比：</div>
                  <div class="num">
                    <span>300%</span>
                    <i class="el-icon-caret-top"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="value">0</div>
              <div class="label">上月</div>
            </div>
          </div>
          <div class="compare">
            <div class="label">总销售金额</div>
            <div class="value">9879W 元</div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.quick-entry {
  margin-top: 2px;

  .entry-item-col {
    margin-bottom: 10px;
  }

  .entry-item {
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 0.8rem;
    transition: all 0.5s;
    .header {
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e9e9e9;
      padding: 0 15px;
      background-color: rgba(105, 161, 249, 0.9);
      .title {
        font-size: 0.8rem;
        color: #fff;
      }
    }
    .order-header {
      background-color: rgb(89, 205, 170);
    }
    .count-header {
      background-color: rgb(250, 200, 88);
    }
    .content {
      padding: 0 15px;
      .top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        .left,
        .right {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          padding: 15px 0;
          border-bottom: 1px solid #e9e9e9;
          .value {
            font-size: 2rem;
          }
          .label {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-end;
            height: 20px;
            .inner-right {
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              margin-left: 10px;
              .num {
                font-size: 14px;
                color: red;
              }
            }
          }
        }
      }
      .compare {
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .entry-item:hover {
    transform: scale(1.04);
  }
}
</style>
